/**
 * @author zhangqiang
 * @date   17/7/18
 */
import React, { Component } from 'react'
import lrz from 'lrz';
import {connect} from 'react-redux'
import {Toast,Icon, Grid } from 'antd-mobile'
import {
	InputItem,
} from '../../components/home'

//通用组件
import {Title} from '../../components/common'

import '../../../styles/addInfo.scss';
import common from '../../utils/common'
import style from './index.scss'


class UploadPage extends Component {
	constructor(props) {
	super(props);
	this.imgFileChange = this.imgFileChange.bind(this);
	this.state = {
		imgCache: '',
		isShowTemplate: true,  //上传好的图片
		isShowIdCard: false, //身份证实例
		isShowInsurance: false, //交强险实例
	}

	}

	componentWillMount() {
		common.setViewTitle('上传图片');		
	}

	toUrl(url) {
		this.context.router.push(url);
	}
	//图片改变时触发上传操作
	imgFileChange(e) {
		this.compressImage(e.target.files[0], (result) => {
			this.changeImgAndCallBack(result);
		});
	}
	   /**
     * 图片压缩上传
     * @param e 图片资源
     */
    compressImage(files, callBack) {
        try {
            Toast.hide();
            Toast.loading("正在上传", 30);
            let quality = 1;
            if (files.size > 1024 * 100) {
                quality = .5;
            } else {
                quality = .7;
            }
            lrz(files, {
                width: 1024,
                quality: quality
            }).then((rst) => {
                Toast.hide();
                callBack(rst.base64);
            }).catch((err) => {
                Toast.fail('上传失败', 2);
            }).always(() => {
            });
        } catch (e) {
            Toast.fail('上传失败', 2);
            console.log(e);
        }

	}
	
    //改变显示的图片
    changeImgAndCallBack(result){
        this.setState({
			imgCache: result,
			isShowTemplate: false
        });
        // this.props.fileChange && this.props.fileChange(result);
	}
	/*
	*  切换身份证mask
	*/
	isShowExample(){
		this.setState({
			isShowIdCard: !this.state.isShowIdCard
		})
	}
	/*
	*  隐藏身份证mask
	*/
	hideIdCard(){
		this.setState({
			isShowIdCard: false
		})
	}

	toImgPreview(url){
		this.context.router.push(url);		
	}

	render() {
	
		return (
			<div className={style.upload}>
				{/* 头部-start- */}
				<div className={style.titleNav}>
					<span>请上传清晰的照片，以免办理失败</span>
					<div className={style.btnExample} onClick={(e) => {this.isShowExample()}}>
						<span>查看范例</span>
						<img src="./images/icon_right.png" alt=""/>
					</div>
				</div>
				{/* 头部-end- */}
				<div className={style.btnUpload} style={!this.state.isShowTemplate?{display: 'none'}:{}}>
					<input ref="uploadCompent" type="file" accept="image/*" onChange={(e) => this.imgFileChange(e)}
                  	 className={style.uploadCompent}/>

					<img className={style.frameLeftTop} src="./images/frame_left_top.png" alt=""/>
					<img className={style.frameLeftBottom} src="./images/frame_left_bottom.png" alt=""/>
					<img className={style.frameRightTop} src="./images/frame_right_top.png" alt=""/>
					<img className={style.frameRightBottom} src="./images/frame_right_bottom.png" alt=""/>
					<div className={style.btnCamera}>
						<img className={style.cameraImg} src="./images/photoTemplate.png" alt=""/>
						<div className={style.cameraText}>						
							<img src="./images/to_add.png" alt=""/>
							<span>上传交强险保单副本</span>
						</div>
						<div className={style.cameraPrompt}>拍照请将相机方框对准证件的边缘并对好焦</div>

					</div>
				</div>

				{/* 上传图片-start- */}
				<div className={style.imgContainer} onClick={()=>{
					this.toImgPreview(`ImgsCarousel?imgs=${this.state.imgCache}&index=0`)
					}}>
					<img src={this.state.imgCache}/>
				</div>
				{/* 上传图片-end- */}
				<div style={{height: '.4rem'}}></div>
				<div className={style.btnBox}>
					<button className={style.submit}>立即上传</button>
				</div>

				<div style={{height: '.4rem'}}></div>

				<div className={style.btnBox} style={this.state.isShowTemplate?{display: 'none'}:{display: 'block'}}>
					<button className={style.submit}>重新上传</button>
					<input ref="uploadCompent" type="file" accept="image/*" onChange={(e) => this.imgFileChange(e)}
                  	 className={style.uploadCompent}/>
				</div>

				{/* 交强险保单实例mask -start- */}
					<div className='alert-bg' style={this.state.isShowInsurance?{display: 'block'}:{}}>
						<img className={style.policyExample} src="./images/policy_example@2x.png" alt=""/>
					</div>
				{/* 交强险保单实例mask -end- */}
				{/* 交强险保单实例mask -start- */}
					<div className='alert-bg' onClick={()=>{this.hideIdCard()}} style={this.state.isShowIdCard?{display: 'block'}:{}}>
						<img className={style.policyExample} src="./images/pic-idCard@2x.png" alt=""/>
					</div>
				{/* 交强险保单实例mask -end- */}
				
			</div>	
		)
	}
}

//使用context
UploadPage.contextTypes = {
	router: React.PropTypes.object.isRequired
};

UploadPage.defaultProps = {};

export default connect()(UploadPage);
